<template>
  <div class="nav_bar" v-if="currentEnvironment == 'dingding'"></div>
  <div class="nav_bar" v-else>
    <van-nav-bar
      :left-text="leftText"
      :title="appTitle"
      :left-arrow="leftArrow"
      fixed
      placeholder
      @click-left="currentEnvironment != 'iwork' ? clickLeft() : ''"
      @click-right="onClickRight"
    >
      <template #left v-if="currentEnvironment == 'iwork'">
        <div>
          <img
            src="~@/assets/img/routerBack.png"
            alt=""
            class="routerBack"
            @click="clickLeft"
          />
          <img
            src="~@/assets/img/appClose.png"
            alt=""
            class="leftPng"
            @click="closeIworApp"
            style="margin-left: 0.27rem"
          />
        </div>
      </template>
      <template #right>
        <van-popover
          v-if="rtitle == '...'"
          v-model="showPopover"
          :offset="[12, 8]"
          placement="bottom-end"
          trigger="click"
          :actions="actions"
          @select="onSelect"
        >
          <template #reference>
            <div style="fontsize: 0.24rem; position: relative; bottom: 0.08rem">
              {{ rtitle }}
            </div>
          </template>
        </van-popover>
        <div v-else style="color: rgb(24, 144, 255)">{{ rtitle }}</div>
        <div @click="scanCode" v-if="showScan">
          <scanInputOutTask
            ref="scanInputOutTask"
            @changeScan="changeScan"
            @goBack="goBack"
          />
        </div>
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
import * as dd from "dingtalk-jsapi";
import scanInputOutTask from "../../components/scanCode/scanInputOutTask.vue";

export default {
  name: "Navbar",
  props: {
    showScan: {
      type: Boolean,
      default: true,
    },
    isGoHistory: {
      type: Boolean,
      default: true,
    },
    rightShow: {
      type: Boolean,
      default: false,
    },
    leftText: {
      type: String,
      default: "",
    },
    appTitle: {
      type: String,
      default: "ERP",
    },
    rtitle: {
      type: String,
      default: "",
    },
    rname: {
      type: String,
      default: "",
    },
    rColor: {
      type: String,
      default: "",
    },
    right: {
      type: String,
      default: "",
    },
    actions: {
      type: Array,
      default: () => {
        return [];
      },
    },
    leftArrow: {
      type: Boolean,
      default: true,
    },
  },
  components: {
    scanInputOutTask,
  },
  watch: {
    right(newVal) {
      let that = this;
      dd.biz.navigation.setRight({
        // backgroundColor : "#ADD8E6",
        // textColor : "#ADD8E611",
        show: this.rightShow, //控制按钮显示， true 显示， false 隐藏， 默认true
        control: true, //是否控制点击事件，true 控制，false 不控制， 默认false
        text: newVal, //控制显示文本，空字符串表示显示默认文本
        // items:this.items,
        onSuccess: function (result) {
          //如果control为true，则onSuccess将在发生按钮点击事件被回调
          that.$emit("ClickRight");
        },
        onFail: function (err) {},
      });
    },
  },
  data() {
    return {
      showPopover: false,
      currentEnvironment: "",
      timer: null,
    };
  },
  created() {
    this.judgeEn();
    this.GLOBAL.currentEnvironment =
      localStorage.getItem("currentEnvironment") == "dingding";
  },

  mounted() {
    this.$nextTick(() => {
      //使用nextTick为了保证dom元素都已经渲染完毕
      this.$emit("eventGetHeight", this.$el.offsetHeight);
    });
  },
  methods: {
    goBack() {
      console.log("33333");
      this.$emit("goBack");
    },
    scanCode() {
      console.log("2222");
      this.$emit("scanCode", "global");
    },
    // 扫码获取信息
    changeScan(v, opratorType) {
      console.log(v, opratorType, "1411");
      if (opratorType == "scan") {
        // if (v.code.EntityType !== "goods") {
        //   this.$toast("请扫正确二维码");
        // }
        this.$emit("changeScan", v, "scan");
      }
    },
    judgeEn() {
      // console.log("这个方法执行了");
      this.currentEnvironment = localStorage.getItem("currentEnvironment");
      if (this.currentEnvironment) {
        if (this.currentEnvironment == "dingding") {
          dd.ui.webViewBounce.disable();
          dd.biz.navigation.setTitle({
            title: this.appTitle, //控制标题文本，空字符串表示显示默认文本
            onSuccess: function (result) {},
            onFail: function (err) {},
          });
          var that_ = this;
          dd.biz.navigation.setMenu({
            onSuccess: function (data) {},
            onFail: function (err) {},
          });
          dd.biz.navigation.setRight({
            // backgroundColor : "#ADD8E6",
            // textColor : "#ADD8E611",
            show: this.rightShow, //控制按钮显示， true 显示， false 隐藏， 默认true
            control: true, //是否控制点击事件，true 控制，false 不控制， 默认false
            text: this.right, //控制显示文本，空字符串表示显示默认文本
            // items:this.items,
            onSuccess: function (result) {
              //如果control为true，则onSuccess将在发生按钮点击事件被回调
              that_.$emit("ClickRight");
            },
            onFail: function (err) {},
          });
        }
        if (this.timer) {
          clearInterval(this.timer);
          this.timer = null;
        }
      } else {
        this.timer = setTimeout(() => {
          this.judgeEn();
        }, 100);
      }
    },
    clickLeft() {
      this.$emit("clickLeft");
      if (this.isGoHistory) {
        this.$router.go(-1);
      }
    },
    onClickRight() {
      console.log('0000');
      
      this.$emit("ClickRight");
    },
    onSelect(action) {
      this.$emit("clickAction", action.text);
    },
    closeIworApp() {
      var opt = {
        data: "", //回传给上一个页面的参数（字符串），没有则不传
        success: function (data) {}, //成功时回调此方法 },
        fail: function (data) {}, //失败时回调此方法   }
      };
      //插件调用代码
      WorkHelper.closeApp(opt);
    },
  },
};
</script>

<style lang='scss' scoped>
/deep/ .van-nav-bar {
  background-color: #ffffff;
  color: #191f25;
  z-index: 999;
}

/deep/ .van-icon {
  color: #191f25;
}

/deep/ .van-nav-bar__text {
  color: #191f25;
}

/deep/ .van-nav-bar__title {
  color: #191f25;
}

/deep/ .van-popover__content {
  background: red;
  box-shadow: 0rem 0rem 0rem 0rem rgba(0, 0, 0, 0.3);
  border-radius: 2rem;
}

.routerBack {
  width: 0.12rem;
  height: 0.16rem;
}

.leftPng {
  width: 0.16rem;
  height: 0.16rem;
}
</style>
